<template>
    <div class="layout-main">
        <div class="section section-filter">
            <div class="panel-title">
                <span class="title">筛选条件</span>
            </div>
            <div class="panel-content">
                <el-form :inline="true" :model="tableData.filter" @keyup.enter.native="sumbitFilter">
                    <el-form-item label="案件接收时间" prop="adate">
                        <el-date-picker v-model="tableData.filter.cdate" value-format="yyyy-MM-dd" type="date" placeholder="请选择案件接收时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="编号">
                        <el-input v-model="tableData.filter.caseCode" placeholder="请输入编号"></el-input>
                    </el-form-item>
                    <el-form-item label="来源渠道">
                        <el-select v-model="tableData.filter.source" placeholder="请选择来源渠道">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.sourceType" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品类型">
                        <el-select v-model="tableData.filter.product" placeholder="请选择产品类型">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.productType" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风险类别">
                        <el-select v-model="riskCategoryForm.id" placeholder="请选择风险类别" @change="riskCategoryChange">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.riskCategory" :key="item.value" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风险类型">
                        <el-select v-model="riskTypeForm.value" placeholder="请选择风险类型" @change="riskTypeChange">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in riskTypeList" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="风险等级">
                        <el-select v-model="riskLevelForm.value" placeholder="请选择风险等级">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in riskLevelList" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="举报人姓名">
                        <el-input v-model="tableData.filter.reflectName" placeholder="请输入举报人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="举报人手机号">
                        <el-input v-model="tableData.filter.reflectPhone" placeholder="请输入举报人手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="被举报人姓名">
                        <el-input v-model="tableData.filter.beReportedName" placeholder="请输入被举报人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="被举报人手机号">
                        <el-input v-model="tableData.filter.beReportedPhone" placeholder="请输入被举报人手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="案件类型">
                        <el-select v-model="tableData.filter.caseType" placeholder="请选择案件类型">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.caseType" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="案件状态">
                        <el-select v-model="tableData.filter.caseStatus" placeholder="请选择案件状态 ">
                            <el-option label="所有" value=""></el-option>
                            <el-option v-for="item in dicts.caseStatus" :key="item.id" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="所属分部">
                    <el-input v-model="tableData.filter.salesDeptName" placeholder="请输入所属分部"></el-input>
                </el-form-item>
                <el-form-item label="分部负责人">
                    <el-input v-model="tableData.filter.salesDeptPrincipal" placeholder="请输入分部负责人"></el-input>
                </el-form-item> -->
                    <el-form-item label="关键字">
                        <el-input v-model="tableData.filter.keyword" title="请输入举报人或者被举报人或者手机号或者身份证" placeholder="请输入关键字"></el-input>
                    </el-form-item>
                </el-form>
                <div class="form-btn">
                    <button @click="sumbitFilter">筛选</button>
                    <button class="btn-reset" @click="resetFilter">重置</button>
                </div>
            </div>
        </div>
        <div class="section section-table">
            <div class="panel-title">
                <span class="title">筛选结果</span>
            </div>
            <div class="panel-content">
                <el-table :data="tableData.data" border style="width: 100%">
                    <el-table-column  fixed="right" label="操作" width="188">
                        <template slot-scope="scope">
                            <permission permission-key="workbench:case.queryDetail">
                                <router-link :to="{ path: '/case/detail', query: { id: scope.row.id }}">详情</router-link>
                            </permission>
                            <!-- <permission permission-key="workbench:case.return">
                            <a v-if="userInfo.id===scope.row.caseUserId&&scope.row.caseStatus==1" @click="showReturnCaseLayer(scope.row.id)">退回</a>
                            <a v-else class="disable">退回</a>
                        </permission> -->
                            <!-- <permission permission-key="workbench:case.takeBack">
                            <a v-if="userInfo.id!==scope.row.caseUserId&&scope.row.caseStatus==1" @click="showRecoverCaseLayer(scope.row.id)">收回</a>
                            <a v-else class="disable">收回</a>
                        </permission>
                        <permission permission-key="workbench:case.allotSelected">
                            <a v-if="userInfo.id===scope.row.caseUserId&&(scope.row.caseStatus==1||scope.row.caseStatus==3)" @click="showDistributeCaseLayer(scope.row.id,scope.row.caseType)">分派</a>
                            <a v-else class="disable">分派</a>
                        </permission> -->
                            <permission permission-key="workbench:case.close">
                                <a v-if="userInfo.id===scope.row.caseUserId&&(scope.row.caseStatus==1||scope.row.caseStatus==3)" @click="showCloseCaseLayer(scope.row)">结案</a>
                                <a v-else class="disable">结案</a>
                            </permission>
                            <permission permission-key="workbench:case.pause">
                                <a v-if="userInfo.id===scope.row.caseUserId&&(scope.row.caseStatus==1||scope.row.caseStatus==3)" @click="showPauseCaseLayer(scope.row.id)">暂停</a>
                                <a v-else class="disable">暂停</a>
                            </permission>
                            <permission permission-key="workbench:case.change">
                                <a v-if="userInfo.id===scope.row.caseUserId&&(scope.row.caseStatus==1||scope.row.caseStatus==3)" @click="showChangeCaseLayer(scope.row.id)">转案</a>
                                <a v-else class="disable">转案</a>
                            </permission>
                        </template>
                    </el-table-column>
                    <el-table-column prop="caseCode" label="编号" width="218">
                    </el-table-column>
                    <el-table-column prop="threadDate" label="线索获取时间" width="155">
                    </el-table-column>
                    <el-table-column prop="cdate" label="案件创建时间" width="155">
                    </el-table-column>
                    <el-table-column prop="cdate" label="案件接收时间" width="155">
                    </el-table-column>
                    <el-table-column prop="sourceName" label="来源渠道" width="108">
                    </el-table-column>
                    <el-table-column prop="productName" label="产品类型" width="100">
                    </el-table-column>
                    <el-table-column prop="riskCategoryName" label="风险类别" width="138">
                    </el-table-column>
                    <el-table-column prop="riskTypeName" label="风险类型" width="138">
                    </el-table-column>
                    <el-table-column prop="riskLevelName" label="风险等级" width="78">
                    </el-table-column>
                    <el-table-column prop="reflectName" label="举报人姓名" width="108">
                    </el-table-column>
                    <el-table-column prop="reflectPhone" label="举报人手机号" width="120">
                    </el-table-column>
                    <el-table-column prop="informerSalesDeptName" label="举报人所属营业部" width="150">
                    </el-table-column>
                    <el-table-column prop="beReportedName" label="被举报人姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="beReportedPhone" label="被举报人手机号" width="120">
                    </el-table-column>
                    <el-table-column prop="beReportedBusiness" label="被举报人所属营业部" width="150">
                    </el-table-column>
                    <el-table-column prop="caseTypeName" label="案件类型" width="108">
                    </el-table-column>
                    <el-table-column prop="caseStatusName" label="案件状态" width="100">
                    </el-table-column>
                    <!-- <el-table-column prop="salesDeptName" label="所属分部" width="120">
                </el-table-column> 
                <el-table-column prop="salesDeptPrincipal" label="分部负责人" width="100">
                </el-table-column>-->
                    <el-table-column prop="lastStepUserName" label="上一步操作人" width="106">
                    </el-table-column>
                    <el-table-column prop="inspector" label="当前操作人" width="100">
                    </el-table-column>
                </el-table>
                <el-pagination v-if="tableData.total" :current-page="tableData.index" :page-sizes="[tableData.sizes,tableData.sizes*2, tableData.sizes*3, tableData.sizes*4]"
                    :page-size="tableData.size" :total="tableData.total" layout="total, sizes, prev, pager, next, jumper" @size-change="tableSizeChange"
                    @current-change="getTableData">
                </el-pagination>
            </div>
        </div>

        <!-- 申请退回 -->
        <layer :data="returnCaseLayer" @on-ok="returnCaseSave"></layer>
        <!-- 申请收回 -->
        <layer :data="recoverCaseLayer" @on-ok="recoverCaseSave"></layer>
        <!-- 分派案件 -->
        <layer :data="distributeCaseLayer" @on-ok="showTipsLayer(1)">
            <el-form v-if="targetActive" :model="distributeCaseLayer.form">
                <el-form-item label="选择角色" class="is-required">
                    <el-select v-model="roleForm.name" placeholder="请选择角色" @change="selectRole">
                        <el-option v-for="item in roleList" :key="item.nextRoleId" :label="item.nextRoleName" :value="item.nextRoleId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择分派对象" class="is-required">
                    <el-select v-model="targetForm.id" placeholder="请选择分派对象">
                        <el-option v-for="item in superiorUser" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <p v-else class="tips">您不可进行分派操作</p>
        </layer>
        <!-- 申请结案 -->
        <layer :data="closeCaseLayer" @on-ok="showTipsLayer(2)">
            <div class="el-form-item" v-if="closeCaseLayer.caseType!=1">
                <label for="reason" class="el-form-item__label">上传结案报告</label>
                <div class="el-form-item__content">
                    <el-upload class="upload-demo" :action="closeCaseLayer.uploadUrl" :on-success="uploadSuccess" :on-remove="removeUploadFile"
                        :before-upload="beforeUpload" :file-list="closeCaseLayer.fileList">
                        <button class="btn-upload">
                            <i class="icon i-upload"></i>
                            <span>上传文件</span>
                        </button>
                        <!-- <div slot="tip" class="el-upload__tip">上传文件大小不能超过100MB</div> -->
                    </el-upload>
                </div>
            </div>
            <el-form v-if="targetActive" :ref="closeCaseLayer.ref" :model="closeCaseLayer.form">
                <el-form-item label="选择角色" class="is-required">
                    <el-select v-model="roleForm.name" placeholder="请选择角色" @change="selectRole">
                        <el-option v-for="item in roleList" :key="item.nextRoleId" :label="item.nextRoleName" :value="item.nextRoleId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择审核人" class="is-required">
                    <el-select v-model="targetForm.id" placeholder="请选择审核人">
                        <el-option v-for="item in superiorUser" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </layer>
        <!-- 申请暂停 -->
        <layer :data="pauseCaseLayer" @on-ok="showTipsLayer(3)">
            <el-form :ref="pauseCaseLayer.ref" :model="pauseCaseLayer.form">
                <el-form-item label="请填写原因" class="is-required">
                    <el-input type="textarea" v-model="pauseCaseLayer.form.suspendCause" placeholder="请填写原因"></el-input>
                </el-form-item>
                <template v-if="targetActive">
                    <el-form-item label="选择角色" class="is-required">
                        <el-select v-model="roleForm.name" placeholder="请选择角色" @change="selectRole">
                            <el-option v-for="item in roleList" :key="item.nextRoleId" :label="item.nextRoleName" :value="item.nextRoleId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择审核人" class="is-required">
                        <el-select v-model="targetForm.id" placeholder="请选择审核人">
                            <el-option v-for="item in superiorUser" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </el-form>
        </layer>
        <!-- 申请转案 -->
        <layer :data="changeCaseLayer" @on-ok="showTipsLayer(4)">
            <el-form :ref="changeCaseLayer.ref" :model="changeCaseLayer.form">
                <el-form-item label="案件类型" class="is-required">
                    <el-select v-model="changeCaseLayer.form.caseType" placeholder="请选择案件类型">
                        <el-option v-for="item in dicts.caseType" :key="item.id" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请填写原因" class="is-required">
                    <el-input type="textarea" v-model="changeCaseLayer.form.switchCause" placeholder="请填写原因"></el-input>
                </el-form-item>
                <template v-if="targetActive">
                    <el-form-item label="选择角色" class="is-required">
                        <el-select v-model="roleForm.name" placeholder="请选择角色" @change="selectRole">
                            <el-option v-for="item in roleList" :key="item.nextRoleId" :label="item.nextRoleName" :value="item.nextRoleId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择审核人" class="is-required">
                        <el-select v-model="targetForm.id" placeholder="请选择审核人">
                            <el-option v-for="item in superiorUser" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </el-form>
        </layer>
        <!-- 提示弹窗 -->
        <layer :data="tipsLayer" @on-ok="confirmSave"></layer>
    </div>
</template>
<script>
    import caseMixin from './case'
    export default {
        name: 'workbenchCase',
        mixins: [caseMixin]
    }
</script>